import React, {useState} from 'react';
import {Button, Card, Col, Form, message, Row, Select, Space, Upload} from "antd";
import {UploadOutlined} from "@ant-design/icons";
import TextArea from "antd/es/input/TextArea";
import {genChartByAiAsyncUsingPost, genChartByAimqUsingPost} from "@/services/hjbi/chartController";
import {useForm} from "antd/es/form/Form";


const AddChartAsync: React.FC = () => {

  const [submitting, setSubmitting] = useState<boolean>(false)
  const [form, setForm] = useForm()

  /**
   * 提交values
   * @param values
   */
  const onFinish = async (values: any) => {
    // 避免重复提交
    if (submitting) {
      return;
    }
    setSubmitting(true)
    // console.log('表单内容: ', values);
    // console.log('file对象', values.file.file)
    const params = {
      ...values,
      file: undefined
    }
    try {
      const res = await genChartByAimqUsingPost(params, {}, values.file.file.originFileObj)
      // const res = await genChartByAiAsyncUsingPost(params, {}, values.file.file.originFileObj)
      if (!res?.data) {
        message.error('分析失败')
      } else {
        message.success('分析成功, 请在分析总览中查看')
        form.resetFields()
      }
    } catch (e: any) {
      message.error('分析失败:' + e.message)
    }

    setSubmitting(false)
  };

  return (
    <div className="add-chart-async">
      <Row gutter={24}>
        <Col span={24}>
          <Card title="智能分析 | Async">
            <Form
              form={form}
              name="addChartAsync"
              onFinish={onFinish}
              initialValues={{}}
              labelCol={{span: 4}}
              wrapperCol={{span: 16}}
              labelAlign="left"
            >
              <Form.Item name="goal" label="分析目标" rules={[{required: true, message: '请输入分析目标'}]}>
                <TextArea placeholder="请输入你的分析诉求，如：分析网站用户增长量情况"/>
              </Form.Item>
              <Form.Item name="name" label="图标名称">
                <TextArea placeholder="请输入图标名称，如：网站信息表"/>
              </Form.Item>
              <Form.Item
                name="chartType"
                label="图表类型"
              >
                <Select placeholder="请选择输出的图表类型"
                        options={[
                          {value: '柱状图', label: '柱状图'},
                          {value: '折线图', label: '折线图'},
                          {value: '饼图', label: '饼图'},
                          {value: '散点图', label: '散点图'},
                          {value: '雷达图', label: '雷达图'},
                          {value: 'K线图', label: 'K线图'},
                          {value: '漏斗图', label: '漏斗图'},
                          {value: '关系图', label: '关系图'},
                          {value: '热力图', label: '热力图'},
                        ]}/>
              </Form.Item>

              <Form.Item
                name="file"
                label="原始数据"
              >
                <Upload name="file" maxCount={1}>
                  <Button icon={<UploadOutlined/>}>上传 CSV 文件</Button>
                </Upload>
              </Form.Item>

              <Form.Item wrapperCol={{span: 12, offset: 4}}>
                <Space>
                  <Button type="primary" htmlType="submit" loading={submitting} disabled={submitting}>
                    智能分析
                  </Button>
                  <Button htmlType="reset">重置</Button>
                </Space>
              </Form.Item>
            </Form></Card>
        </Col>
      </Row>
    </div>
  );
};
export default AddChartAsync;
